<template>
  <div class="pay">
    <div class="title">
      <svg
        @click="$router.push('/own')"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>收银台</span>
      <span></span>
    </div>
    <ul class="list">
      <li>
        <span>支付单号</span>
        <span>{{ $route.query.paySn }}</span>
      </li>
      <li>
        <span>订单金额</span>
        <span>￥{{ Number($route.query.total).toFixed(2) }}</span>
      </li>
    </ul>
    <div class="pay-type">
      <p>选择支付方式</p>

      <van-radio-group v-model="radio">
        <ul class="list">
          <li>
            <div class="list-left">
              <img src="@/assets/imgs/微信1.png" alt="" />
              <span>微信支付</span>
            </div>
            <van-radio name="1" checked-color="#ee0a24"></van-radio>
          </li>
          <li>
            <div class="list-left">
              <img src="@/assets/imgs/支付宝1.png" alt="" />
              <span>支付宝</span>
            </div>
            <van-radio name="2" checked-color="#ee0a24"></van-radio>
          </li>
        </ul>
      </van-radio-group>
    </div>
    <div class="to-pay">
      <span @click="toPay"> 立即支付 </span>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import Vue from "vue";
import { RadioGroup, Radio } from "vant";
import { Dialog } from "vant";
import { mapMutations } from "vuex";
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Dialog);
export default {
  data() {
    return {
      radio: "1",
      token: null,
    };
  },
  created() {
    this.token = localStorage.getItem("fastCar-token");
  },
  methods: {
    ...mapMutations(["changeOrderType"]),
    toPay() {
      let local = JSON.parse(localStorage.getItem("confirm-pay")) || [];
      let local2 = JSON.parse(localStorage.getItem("wait-pay")) || [];
      Dialog.confirm({
        title: "",
        message: "确认支付！",
      })
        .then(async () => {
          localStorage.setItem(
            "confirm-pay",
            JSON.stringify([
              {
                paySn: this.$route.query.paySn,
                total: this.$route.query.total,
                cartIds: this.$route.query.cartIds
                  ? JSON.parse(this.$route.query.cartIds)
                  : "",
                goodsInfo: JSON.parse(this.$route.query.goodsInfo),
              },
              ...local,
            ])
          );
          if (this.$route.query.cartIds) {
            await this.axios({
              method: "POST",
              url: "https://m-mall.gxptkc.com/v3/business/front/cart/deleteCarts",
              headers: {
                authorization: `Bearer ${this.token}`,
                "content-type": "application/x-www-form-urlencoded",
              },
              data: qs.stringify({
                cartIds: JSON.parse(this.$route.query.cartIds).join(","),
              }),
            });
          }
          this.$router.push("/cart");
        })
        .catch(async () => {
          localStorage.setItem(
            "wait-pay",
            JSON.stringify([
              {
                paySn: this.$route.query.paySn,
                total: this.$route.query.total,
                cartIds: this.$route.query.cartIds
                  ? JSON.parse(this.$route.query.cartIds)
                  : "",
                goodsInfo: JSON.parse(this.$route.query.goodsInfo),
                practiceStamp: Date.now(),
              },
              ...local2,
            ])
          );
          if (this.$route.query.cartIds) {
            await this.axios({
              method: "POST",
              url: "https://m-mall.gxptkc.com/v3/business/front/cart/deleteCarts",
              headers: {
                authorization: `Bearer ${this.token}`,
                "content-type": "application/x-www-form-urlencoded",
              },
              data: qs.stringify({
                cartIds: JSON.parse(this.$route.query.cartIds).join(","),
              }),
            });
          }

          this.changeOrderType("waitPay");
          this.$router.push("/order");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pay {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100vh;
  .title {
    flex-grow: 0;
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    margin-bottom: 10rem;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }
  > ul.list {
    flex-grow: 0;
    padding: 0 8rem;
    margin-bottom: 10rem;
    background-color: #fff;
    li {
      display: flex;
      justify-content: space-between;
      padding: 15rem 0;
      span {
        font-size: 15rem;
      }
      &:last-child {
        border-top: solid 1rem #eee;
        span {
          &:last-child {
            color: #fc1c1c;
          }
        }
      }
    }
  }
  .pay-type {
    background-color: #fff;
    padding: 0 8rem;
    > p {
      padding: 15rem 0 0;
      font-size: 16rem;
    }
    ul.list {
      li {
        padding: 10rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .list-left {
          display: flex;
          align-items: center;
          img {
            width: 40rem;
            height: 40rem;
            margin-right: 10rem;
          }
          span {
            font-size: 14rem;
          }
        }
        &:last-child {
          border-top: 1px solid #eee;
        }
      }
    }
  }
  .to-pay {
    flex-grow: 1;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18rem;
      background-color: #fc1c1c;
      color: #fff;
      width: 90%;
      height: 40rem;
      border-radius: 20rem;
      margin-bottom: 20rem;
    }
  }
}
</style>